<!-- Author:Rain -->
<template>
    <!-- 搜索 -->
    <div class="search-form ">
        <form action="/job_detail/" method="get">
            <div class="search-form-con">
                <div @click="isShow = !isShow" class="position-sel">
                    <span class="label-text"><b>职位类型</b><i class="iboss-right-fill"></i></span>
                </div>
                <p class="ipt-wrap"><input @blur="isFocus = false" @focus="isFocus = true" type="text" name="query"
                        class="ipt-search" maxlength="50" autocomplete="off" placeholder="搜索职位、公司"></p>
            </div>
            <a href="javascript:;" class="btn-map-search" ka="search_box_map">地图</a>
            <button class="btn btn-search" ka="search_box_index">搜索</button>
            <!-- 职位类型！！！ -->
            <div :style="{ display: (!isShow ? 'none' : '') }" class="position-box">
                <div class="dropdown-menu">
                    <div class="select-tree" data-level="3">
                        <div class="position-select-dropdown">
                            <div class="position-select-dropdown__inner">
                                <!-- 遍历的结构 -->
                                <div v-for="item, index in searchData" :key="index"
                                    class="position-select-dropdown__item">
                                    <span class="position-select-dropdown__title">{{ item.title }}</span>
                                    <div class="position-select-dropdown__child">
                                        <div class="position-select-dropdown__main"><span
                                                class="position-select-title">{{
                                                    item.title }}</span>
                                            <div v-for="label, ind in item.labels" :key="ind"
                                                class="position-select-dropdown__grandson"><span
                                                    class="position-select-dropdown__label">{{ label.label }}</span>
                                                <div class="position-select-dropdown__list">
                                                    <a v-for="detail, i of label.list" :key="i" href="javascript:;">{{
                                                        detail }}</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 历史搜索和搜索发现！！！ -->
            <div class="search-find-box" :style="{ display: (!isFocus ? 'none' : '') }">
                <div class="search-find-group history"><span class="search-find-title">历史搜索<a href="javascript:;"
                            class="clear-search-btn" ka="clear_history_word_click">清空历史</a></span>
                    <div class="search-find-list"><a href="javascript:;">撒大声地</a><a href="javascript:;">鸿蒙开发</a><a
                            href="javascript:;">前端</a><a href="javascript:;">鸿蒙</a></div>
                </div>
                <div class="search-find-group"><a href="javascript:;" class="switch-find-btn">换一批</a><span
                        class="search-find-title">搜索发现</span>
                    <div class="search-find-list search-find-item active"><a href="javascript:;"
                            class="has-hot-word">技术美术</a><a href="javascript:;" class="">技术美术实习</a><a
                            href="javascript:;" class="">技术美术特效</a><a href="javascript:;" class="">技术美术实习生</a><a
                            href="javascript:;" class="">unity技术美术</a><a href="javascript:;" class="">游戏技术美术</a><a
                            href="javascript:;" class="">u3d技术美术</a><a href="javascript:;" class="">ue4技术美术</a><a
                            href="javascript:;" class="">ue技术美术</a><a href="javascript:;" class="">技术java</a></div>
                    <div class="search-find-list search-find-item"><a href="javascript:;" class="">java开发前端</a><a
                            href="javascript:;" class="">前端java</a><a href="javascript:;" class="">java技术组长</a><a
                            href="javascript:;" class="">前端技术</a><a href="javascript:;" class="">美术开发</a><a
                            href="javascript:;" class="">开发java</a><a href="javascript:;" class="">java前端开发实习生</a><a
                            href="javascript:;" class="">技术开发</a><a href="javascript:;" class="">技术总监java</a><a
                            href="javascript:;" class="">技术合伙人java</a></div>
                    <div class="search-find-list search-find-item"><a href="javascript:;" class="">java技术专家</a><a
                            href="javascript:;" class="">java技术经理</a><a href="javascript:;" class="">java技术主管</a><a
                            href="javascript:;" class="">java技术支持</a><a href="javascript:;" class="">java技术负责人</a><a
                            href="javascript:;" class="">鸿蒙系统开发</a><a href="javascript:;" class="">java开发应届生</a><a
                            href="javascript:;" class="">java高级开发</a><a href="javascript:;"
                            class="has-hot-word">后端java开发</a><a href="javascript:;" class="">java开发专家</a></div>
                </div>
            </div>
        </form>
    </div>
</template>

<script setup lang="ts">
import { getPosition } from "@/api/mock"
const isFocus = ref(false)//搜索框是否聚焦！

let searchData: any = []//静态的数据
// 进行数据的请求
getPosition().then(val => {
    searchData = val
})
const isShow = ref(false)

</script>

<style scoped>
/* 最外层的东西：表面 */
.search-form {
    position: relative;
    zoom: 1;
    z-index: 1000;
    box-shadow: 0 10px 30px 0 rgba(153, 153, 153, .2);
    border-radius: 10px;
    height: 54px;
    width: 900px;
}

.search-form-con {
    border-radius: 10px;
    box-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 780px;
    background: #fff;
    border-radius: 10px;
    border: 2px solid RGB(94, 112, 201);
    width: 778px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .13);
    float: left;
}

.position-sel {
    border-radius: 10px;
    border: none;
    padding: 11px 18px;
    width: 84px;
    float: left;
    display: block;
    height: 28px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
    display: block;
}

.column-search-panel .position-sel .label-text {
    width: 80px;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

.home-body-wrapper .position-sel b {
    color: #222;
    font-size: 16px;
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    font-weight: 400;
}

.position-sel i {
    width: 4px;
    height: 7px;
    top: 20px;
    right: 14px;
    background: url(https://img.bosszhipin.com/static/file/2022/01vcskhm8y1652252017628.png) -6px -16px/10px auto no-repeat;
    transform: rotate(90deg);
    position: absolute;
}

.position-sel:hover b {
    color: #00d7c6;
    text-decoration: none;
    -webkit-transition: all linear .2s;
    transition: all linear .2s
}

.ipt-wrap {
    border-radius: 10px;
    height: 50px;
    border: none;
    background: #fff;
    overflow: hidden;
    position: relative;
}

.ipt-search {
    padding: 11px 18px;
    width: 626px;
    font-size: 16px;
    height: 28px;
    line-height: 30px;
    border: 0;
    color: #414a60;
}

.btn-map-search {
    position: absolute;
    top: 50%;
    right: 148px;
    margin-top: -12px;
    height: 24px;
    font-size: 16px;
    color: #333;
    z-index: 1;
    display: flex;
    align-items: center;
    transition: all .2s linear;

}

.btn-map-search:before {
    content: ' ';
    display: block;
    width: 24px;
    height: 24px;
    margin-right: 4px;
    background: url(https://img.bosszhipin.com/static/file/2023/rnb8fa70bs1675773960493.png) 0 0/24px auto no-repeat;
}

.btn-map-search:hover {
    color: #00d7c6;
    text-decoration: none;
    -webkit-transition: all linear .2s;
    transition: all linear .2s
}

.btn {
    display: inline-block;
    min-width: 112px;
    box-sizing: content-box;
    height: 36px;
    line-height: 36px;
    border: 1px #5dd5c8 solid;
    font-size: 16px;
    color: #fff;
    letter-spacing: 1px;
    background: #5dd5c8;
    text-align: center;
    cursor: pointer;
}

.btn-search {
    width: 128px;
    background: RGB(94, 112, 201);
    border-radius: 0 10px 10px 0;
    font-size: 20px;
    height: 53px;
    line-height: 53px;
    font-weight: 700;
    float: right;
}

/* 历史搜索和搜索发现！！！ */

.search-find-box {
    position: absolute;
    left: 120px;
    top: 58px;
    width: 660px;
    padding: 4px 16px 16px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .08);
    border-radius: 12px;
    overflow: hidden;
}

.search-find-box .search-find-group {
    position: relative;
    margin-top: 8px;
}

.search-find-box .switch-find-btn {
    position: absolute;
    right: 0;
    top: 8px;
    z-index: 1;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #00a6a7;
    line-height: 17px;
    transition: all .2s linear;
}

.search-find-box .switch-find-btn:before {
    content: ' ';
    display: inline-block;
    margin-right: 4px;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    background: url(https://img.bosszhipin.com/static/file/2023/6c9swnmxfg1675251970848.png) 0 0/16px auto no-repeat;
}

.search-find-box .search-find-title {
    display: block;
    font-size: 12px;
    color: #757575;
    line-height: 17px;
    padding: 8px 0;
}

.search-find-box .search-find-list {
    overflow: hidden;
    margin-left: -6px;
    margin-right: -6px;
}

.search-find-box .search-find-list a {
    background: #f8f8f8;
    border-radius: 6px;
    font-size: 14px;
    color: #666;
    line-height: 20px;
    padding: 2px 8px;
    float: left;
    margin: 4px 6px;
    word-break: break-all;
    transition: all .2s linear;
}

.search-find-box .search-find-title .clear-search-btn {
    float: right;
    font-size: 12px;
    color: #999;
    line-height: 17px;
    transition: all .2s linear;
}

.search-find-box .search-find-group {
    position: relative;
    margin-top: 8px;
}

.search-find-box .switch-find-btn {
    position: absolute;
    right: 0;
    top: 8px;
    z-index: 1;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #00a6a7;
    line-height: 17px;
    transition: all .2s linear;
}

.search-find-box .search-find-title {
    display: block;
    font-size: 12px;
    color: #757575;
    line-height: 17px;
    padding: 8px 0;
}

.search-find-box .search-find-item {
    display: none;
}

.search-find-box .search-find-item.active {
    display: block;
}

.search-find-box .search-find-list {
    overflow: hidden;
    margin-left: -6px;
    margin-right: -6px;
}

/* 职位类型：：：：：搜索类型！！！ */
.position-box {
    top: 58px;
    left: 0;
    width: auto;
    height: auto;
    display: block;
    position: absolute;
    color: #8d92a1;
}

.position-box .dropdown-menu {
    display: block;
    position: relative;
    height: 0;
    margin-right: 2px;
}

.position-box .select-tree {
    display: inline-block;
    zoom: 1;
    border-radius: 8px;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .08);
    position: relative;
}

.position-select-dropdown {
    border-radius: 8px;
    overflow: hidden;
}

.position-box .select-tree:after {
    content: '';
    display: block;
    overflow: hidden;
    visibility: hidden;
    clear: both;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.position-select-dropdown .position-select-dropdown__inner {
    height: 242px;
    padding: 4px 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-y: overlay;
    background: #fff;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .08);
}

.position-select-dropdown__item:hover>span {
    color: #00d7c6;
    text-decoration: none;
    -webkit-transition: all linear .2s;
    transition: all linear .2s
}

.position-select-dropdown:after {
    content: ' ';
    position: absolute;
    top: 4px;
    width: 4px;
    right: -4px;
    bottom: 0;
    z-index: 1;
    background: 0 0;
}

.position-select-dropdown .position-select-dropdown__title {
    position: relative;
    display: block;
    width: 168px;
    box-sizing: border-box;
    font-size: 14px;
    color: #333;
    height: 36px;
    line-height: 36px;
    padding: 0 24px 0 16px;
    background: #fff;
    cursor: pointer;
    transition: all .2s linear;
}

.position-select-dropdown .position-select-dropdown__title:after {
    content: ' ';
    position: absolute;
    right: 16px;
    width: 4px;
    height: 7px;
    top: 14px;
    background: url(https://img.bosszhipin.com/static/file/2022/01vcskhm8y1652252017628.png) -6px -16px/10px auto no-repeat;
}

/* 最后一层hover右侧显示的东西 */
.position-select-dropdown .position-select-dropdown__child {
    display: none;
    position: absolute;
    top: 0;
    left: 172px;
    z-index: 1;
    width: 610px;
    padding: 4px 0;
    background: #fff;
    /* box-shadow: 0 10px 40px 0 rgba(153, 153, 153, .2); */
    border-radius: 12px;
    overflow: hidden;
}

.position-select-dropdown__item:hover .position-select-dropdown__child {
    display: block;
}

.position-select-dropdown .position-select-dropdown__main {
    overflow: auto;
    overflow: overlay;
    height: 234px;
}

.position-select-dropdown .position-select-title {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #12141a;
    line-height: 22px;
    padding: 12px 16px 4px 16px;
}

.position-select-dropdown .position-select-dropdown__grandson {
    padding: 12px 0 0 10px;
    display: flex;
}

.position-select-dropdown .position-select-dropdown__label {
    float: left;
    width: 122px;
    font-size: 13px;
    color: #666;
    line-height: 18px;
    padding-left: 6px;
    word-break: break-all;
    box-sizing: border-box;
    flex-shrink: 0;
}

.position-select-dropdown .position-select-dropdown__list {
    position: relative;
    overflow: hidden;
    flex: 1;
}

.position-select-dropdown .position-select-dropdown__list a {
    float: left;
    margin-bottom: 12px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 13px;
    color: #222;
    line-height: 18px;
    transition: all .2s linear;
}
</style>
